-
Notifications
You must be signed in to change notification settings - Fork 14
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Move SmartCopy to Chrome Manifest V3 #112
base: master
Are you sure you want to change the base?
Conversation
Update from master
Merge from master
An example for scraping a webpage by Gemini: Recipe Clipper Chrome Extension (Example)This is a basic example of a Chrome extension that parses a webpage to extract a recipe. Functionality:
Components:
Here's a simplified breakdown of the files: manifest.json: {
"manifest_version": 3,
"name": "Recipe Clipper",
"version": "1.0",
"description": "Clips recipes from webpages",
"permissions": ["activeTab"],
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content.js"]
}],
"action": {
"default_popup": "popup.html"
}
} content.js: chrome.action.onClicked.addListener(function(tab) {
// Get elements from the webpage
var title = document.querySelector("h1.recipe-title").innerText;
var ingredients = document.querySelectorAll("ul.ingredients li");
var instructions = document.querySelector("div.instructions").innerText;
// Process the data (can be improved for better extraction)
var ingredientList = "";
for (var i = 0; i < ingredients.length; i++) {
ingredientList += ingredients[i].innerText + "\n";
}
// Create the recipe data object
var recipe = {
title: title,
ingredients: ingredientList,
instructions: instructions
};
// Send the recipe data to the popup script
chrome.tabs.sendMessage(tab.id, recipe);
}); popup.html: (This is just an example structure for the popup window) <!DOCTYPE html>
<html>
<head>
<title>Recipe Clipper</title>
</head>
<body>
<h1>Recipe</h1>
<p id="recipe-title"></p>
<h2>Ingredients</h2>
<ul id="ingredients-list"></ul>
<h2>Instructions</h2>
<p id="instructions"></p>
<script src="popup.js"></script>
</body>
</html> popup.js: (This script receives data from content.js and populates the popup window) chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, function(response) {
document.getElementById("recipe-title").innerText = response.title;
document.getElementById("ingredients-list").innerText = response.ingredients;
document.getElementById("instructions").innerText = response.instructions;
});
}); Please note: This is a very basic example and has limitations. Real-world recipe parsing would require more sophisticated techniques to handle variations in HTML structure across recipe websites. Remember, building Chrome extensions requires some coding knowledge. There are tutorials available online to get you started with Chrome extension development https://developer.chrome.com/docs/extensions/get-started. You can also find existing recipe clipper extensions on the Chrome Web Store for inspiration. |
Trying to tackle #111 , so far no luck